<template>
  <div class="orderDetail">
    <div class="header">
      <router-link to="/my-order" class="header-btnLeft">
        <img src="../assets/back-btn.png">
      </router-link>
      <h1 class="header-title">订单详情</h1>
      <router-link to="/" class="header-btnRight"  ><img src="../assets/tabBar-home.png"></router-link>
    </div>
    <div></div>
    <div class="order-wrap">
        <!-- 判断用车订单显示 -->
        <div v-if="orderData.orderType == 'Vehicle' && orderData.orderSubType">
            <div class="order-wrap-title">{{orderData.name}}</div>
            <mt-cell class="order-wrap-nav" title="订单信息"></mt-cell>
            <mt-cell title="订单编号" :value="orderData.orderId"></mt-cell>
            <mt-cell title="下单时间" :value="formatDateString(orderData.subclassOrder.createdAt)"></mt-cell>
            <mt-cell class="order-wrap-state" title="订单状态" :value="orderData.displayedStatusStr"></mt-cell>
            <!-- 接机展示 -->
            <div v-if="orderData.orderSubType == 'Transport_Vehicle_FromAirport'">
                <mt-cell title="航班号" :value="orderData.subclassOrder.details.flightNo"></mt-cell>
                <mt-cell class="order-wrap-longtext" title="降落机场" :value="orderData.subclassOrder.details.from.airport ?orderData.subclassOrder.details.from.airport.name :''"></mt-cell>
                <mt-cell title="降落时间(当地)" :value="orderData.subclassOrder.details.timeStr2 ? orderData.subclassOrder.details.timeStr2 : formatDateString(orderData.subclassOrder.details.time)"></mt-cell>
                <mt-cell class="order-wrap-longtext" title="目的地" :value="orderData.subclassOrder.details.to.arbitrary.place.name"></mt-cell>
                <mt-cell title="是否需要举牌接机" :value='orderData.subclassOrder.details.holdSign ? "需要" : "不需要"'></mt-cell>
            </div>
            <!-- 送机展示 -->
            <div v-if="orderData.orderSubType == 'Transport_Vehicle_ToAirport'">
                <mt-cell title="航班号" :value="orderData.subclassOrder.details.flightNo"></mt-cell>
                <mt-cell class="order-wrap-longtext" title="送达机场" :value="orderData.subclassOrder.details.to.airport ?orderData.subclassOrder.details.to.airport.name :''"></mt-cell>
                <mt-cell class="order-wrap-longtext" title="出发地" :value="orderData.subclassOrder.details.from.arbitrary.place.name"></mt-cell>
            </div>
            <!-- 单程接送 -->
            <div v-if="orderData.orderSubType == 'Transport_Vehicle_ShortDistance'">
                <mt-cell class="order-wrap-longtext" title="出发地" :value="orderData.subclassOrder.details.from.arbitrary.place.name"></mt-cell>
                <mt-cell class="order-wrap-longtext" title="目的地" :value="orderData.subclassOrder.details.to.arbitrary.place.name"></mt-cell>
            </div>
            <!-- 按天包车 -->
            <div v-if="orderData.orderSubType == 'Transport_Vehicle_Day'">
                <mt-cell title="天数" :value="orderData.subclassOrder.details.days+'天'"></mt-cell>
                <mt-cell class="order-wrap-longtext" title="出发地" :value="orderData.subclassOrder.details.from.arbitrary.place.name"></mt-cell>
            </div>

            <mt-cell title="车型" :value="orderData.subclassOrder.details.carTypeStr"></mt-cell>
            <mt-cell title="出行日期" :value="orderData.startDate"></mt-cell>
            <!-- 司导信息展示 -->
            <div v-if="orderData.subclassOrder.driver">
                <mt-cell class="order-wrap-nav" title="司导及联系信息"></mt-cell>
                <mt-cell title="司机姓名" :value="orderData.subclassOrder.driver.driver.profile.name"></mt-cell>
                <mt-cell title="联系方式" :value="orderData.subclassOrder.driver.driver.username"></mt-cell>
            </div>
            
            <mt-cell class="order-wrap-nav" title="出行人及联系方式"></mt-cell>
            <mt-cell title="出行人" :value="orderData.subclassOrder.consumer.contact.name"></mt-cell>
            <mt-cell title="预定手机" :value="orderData.subclassOrder.consumer.contact.phone"></mt-cell>
            <mt-cell title="微信" :value="orderData.subclassOrder.consumer.contact.wechat"></mt-cell>
            <mt-cell title="人数" :value='"大人: "+orderData.subclassOrder.details.adultPassengers+" / 小孩: "+orderData.subclassOrder.details.childPassengers'></mt-cell>
            <mt-cell title="行李" :value="orderData.subclassOrder.details.largeLuggages"></mt-cell>
            <!-- <mt-cell class="order-wrap-longtext" title="备注" :value="orderData.subclassOrder.details.note"></mt-cell> -->

            <!-- <mt-cell class="order-wrap-nav" title="支付信息"></mt-cell>
            <div v-if="orderData.subclassOrder.payments">
                <mt-cell title="产品价格" :value="'￥'+orderData.price.amount"></mt-cell>
                <mt-cell class="order-wrap-money" title="实付金额" :value="'￥'+orderData.subclassOrder.payments.online.amount"></mt-cell>
            </div>
            <div v-else>
                <mt-cell title="产品价格" :value="'￥'+orderData.price.amount"></mt-cell>
                <mt-cell class="order-wrap-money" title="实付金额" :value="'￥'+orderData.price.amount"></mt-cell>
            </div> -->
        </div>
        <div v-else>
            <div class="order-wrap-title" v-if="orderData.orderType=='CustomMade'">
                <router-link :to="'/my-program-show/'+orderData.goodsId" class="order-wrap-title-jump" v-if="orderData.goodsId">{{orderData.orderName}}</router-link>
                <span v-else>{{orderData.orderName}}</span>
            </div>
            <div class="order-wrap-title" v-else>
                <router-link :to="'/show/'+orderData.goodsId" class="order-wrap-title-jump" v-if="orderData.goodsId">{{orderData.orderName}}</router-link>
                <span v-else>{{orderData.orderName}}</span>
            </div>
            <mt-cell class="order-wrap-nav" title="订单信息"></mt-cell>
            <mt-cell title="订单编号" :value="orderData.orderNo"></mt-cell>
            <mt-cell title="下单时间" :value="orderData.initAt"></mt-cell>
            <mt-cell title="订单状态" class="order-wrap-state" :value="orderData.displayedStatusStr"></mt-cell>

            <mt-cell class="order-wrap-nav" title="出行人及联系方式"></mt-cell>
            <mt-cell v-for="peo in orderData.orderPerson" :key="peo.person_name" :title="peo.person_name" :value="peo.person_num+'人'"></mt-cell>
            <mt-cell title="出行日期" :value="orderData.travelDate"></mt-cell>
            <!-- 多个出行人 -->
            <div v-if="orderData.bandiduser && orderData.bandiduser.length>0">
                <mt-cell v-for="(peo2,index) in orderData.bandiduser" :key="index" :title="index<1?'主出行人':'出行人'+(index+1)" :value="peo2.surname+peo2.firstname"></mt-cell>
            </div>
            <div v-else>
                <mt-cell title="出行人" :value="(orderData.orderuser && orderData.orderuser.firstname) ? orderData.orderuser.surname+orderData.orderuser.firstname : (orderData.orderuser && orderData.orderuser.surname) ? orderData.orderuser.surname : ''"></mt-cell>
            </div>
            
            <mt-cell title="预定手机" :value="orderData.orderuser ? orderData.orderuser.Phone :''"></mt-cell>
            <mt-cell title="预定邮箱" :value="orderData.orderuser ? orderData.orderuser.email :''"></mt-cell>
            <mt-cell class="order-wrap-longtext" title="接待地址" :value="orderData.serveAddress"></mt-cell>
            <!-- <mt-cell class="order-wrap-longtext" title="备注" :value="orderData.remarks"></mt-cell> -->


            
            <!-- <mt-cell class="order-wrap-nav" title="支付信息"></mt-cell>
            <mt-cell title="产品价格" :value="'￥'+orderData.originalMoney"></mt-cell>
            <mt-cell class="order-wrap-money" title="实付金额" :value="'￥'+orderData.foldMoney"></mt-cell> -->
        </div>
        
        
    </div>
  </div>
</template>

<script>
import { Toast, MessageBox, Indicator } from "mint-ui";
import wxShare from "../store/wxShare";

export default {
  name: "My-Order-Deatail",
  data() {
    return {
        order_no:"",
        orderData: {}
    };
  },
  methods: {
    getOrderData() {
      let _that = this;
      var params = {
          order_no: this.order_no
      };
      _that.axios
        .post("/orderdetail", params,true)
        .then(res => {
            if(res.data.msg){
                return;
            }
            _that.orderData = res.data;
            _that.share(res.data);
        })
        .catch(err => console.log(err));
    },
    formatDateString(time) {
        var d = new Date(time);
        return d.getFullYear() + "-" + ("0" + (d.getMonth() + 1)).slice(-2) + "-" + ("0" + d.getDate()).slice(-2)
          + " " + ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2);
    },
    share(order) {
        let _orderName = (order.orderSubType && order.orderType == 'Vehicle') ? order.name : order.orderName;
        wxShare({ title: "我的订单",desc: _orderName, debug: false }, function() {
            console.log("分享成功");
        });
    }
  },
  mounted() {
    window.scrollTo(0,0);
    this.order_no = this.$route.params.id;
    this.getOrderData();
  }
};
</script>

<style lang="scss">
@import "../assets/base";

.orderDetail .h30 {
  height: rpx(30);
  background: $bgcolor1;
}

.orderDetail .h120 {
  height: rpx(200);
  background: $bgcolor1;
}

.orderDetail  {
  background: $bgcolor1;
  min-height: 100%;
}

.orderDetail .header {
  display: flex;
  align-items: center;
  padding: rpx(30);
  justify-content: space-between;
  background: $color0;
  &-btnLeft {
    width: rpx(64);
    height: rpx(64);
    padding-top: rpx(16);
    img {
      width: rpx(32);
      height: rpx(32);
    }
  }
  &-btnRight{
    width: rpx(64);
    height: rpx(64);
    padding-top: rpx(16);
    img{
        width: rpx(42);
        height: rpx(42);
    }
  }
  &-title {
    flex: 1;
    font-size: rpx(36);
    text-align: center;
    font-weight: normal;
  }
}
.orderDetail .mint-cell{
    min-height: rpx(90);
}
.orderDetail .mint-cell-title{
    min-width: rpx(100);
}
.orderDetail .order-wrap{
    background: #ffffff;
    margin-top: rpx(30);
    padding: rpx(20) rpx(20) rpx(100) rpx(20);
    &-title {
        font-size: rpx(34);
        font-weight: 400;
        padding: rpx(20) 0;
        color: #FB7D33;
        line-height: 1.4;
        &-jump {
            color: #FB7D33;
            text-decoration: underline;
        }
    }
    
    &-nav {
        font-size: rpx(30);
        font-weight: 400;
        font-weight: 600;
        display: flex;
        align-items: center;
        min-height: rpx(120);
    }
    
    &-nav:before {
        content: "";
        display: inline-block;
        width: rpx(10);
        height: rpx(28);
        background: #FB7D33;
    }
    &-money .mint-cell-value{
       color: red;
    }
    &-state .mint-cell-value{
       color: #FB7D33;
    }
    &-longtext .mint-cell-value{
       padding: rpx(20px) 0 rpx(20px) rpx(20px);
       text-align: right;
    }
    
}
.orderDetail .mint-cell .mint-cell-wrapper{
    font-size: rpx(28);
}
</style>